{Day28} 小公主訂單網頁嘗試集＿第二十八集＿實作柒天

2022 iThome 鐵人賽

DAY 28

Modern Web

訂單網頁嘗試集系列第 28 篇

14th鐵人賽

icetong

2022-10-13 14:11:03

621 瀏覽

分享至

歐某，竟然實作一週ㄌ
還這麼弱的網頁，可見小公主可能真的沒有程式的天份跟興趣?????

哭ㄌ

新增功能：
酷動畫

來源：酷動畫集

html:

<!DOCTYPE html>
<html>
    <head>
       <title>little_princess_web</title>
       <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    </head>
  
<div class="title">
<h1>歡迎光臨小公主網頁嘗試集！</h1>
<h2>訂單網頁嘗試集＿實作</h2>
<link rel="stylesheet" href="homepage.css">

</div>

<body>
  <Marquee direction=right behavior="altemate" >小公主海底世界盛大開幕！！</Marquee>
 

	<div class="wrapper">
		<div class="line line1">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line2">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line3">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line4">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line5">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line6">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line7">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line8">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line9">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line10">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line11">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
	</div>
	<footer>
		<p style="color: #fff">Inspired by <a href="https://dribbble.com/shots/1763719-DNA-GIF"><img src="https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-dnld-5992b20594860fdfef86a503773447ae.png" alt="dribble"></a></p>
	</footer>
</body>
    <ul class="drop-down-menu">
        <li><a href="https://ithelp.ithome.com.tw/users/20151423">關於小公主</a>
        </li>
        <li><a href="https://ithelp.ithome.com.tw/articles/10291522">30天鐵人賽目標計畫</a>
        </li>
        <li><a href="https://ithelp.ithome.com.tw/users/20151423/ironman/5260">30天鐵人賽網頁連結</a>
        </li>
        <li><a href="./day25.html">小公主販售ㄉ海底世界</a>
        </li>
    </ul>
<h3>welcome to little_princess_web</h3>
<h3>這裡是小公主，小公主的訂購網頁似乎真的產不出來</h3>
<h3>但目前還是有建立起這個酷東西</h3>
<br>
<img src="./photo/IMG_4003拷貝.jpg" alt="me">

<!-- 回到頂端按鈕 start -->
<script>
    //<![CDATA[
    (function () {
    $("body").append("<img id='goTopButton' style='display: none; z-index: 5; cursor: pointer;' title='回到頂端'/>");
    var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAAC3CAMAAAAGjUrGAAAAdVBMVEX///8AAADS0tJeXl78/PyLi4v5+fnr6+sFBQX29vbg4ODc3NxISEhpaWm3t7fw8PCEhIQbGxulpaXMzMzBwcFBQUFRUVEXFxd6enpXV1cQEBCrq6s4ODiZmZknJycsLCyQkJChoaFycnI8PDxlZWW7u7t3d3c8rhJlAAAFA0lEQVR4nO2daUPiMBCGExjSg3KIyCUo7rr+/5+4SUE53l5Qd2va9/mKxfRhMtNMU1CKEOI/IqbpIfw4RCZKmh7Ej0JExUlAKeeIyFr3DZ2cIWagtR5YNU2P5Mcgaqwdc8VEm+JiI15aI6HexIyUFFuFJwt9YD0xjBSHmKkOQ51GypS1xyHqWZ8YU4pTMnw4c/IwpBQlk0SHZ1KSSdMjahqbYH/pS1YdLz1ymUwOPDc9qmYR6YXgRPe6HSnBFpXo30F3nYiSUYaSUH90NlDEqLcMJY6Z6qyVudYZ6cTxKJ1c+YgKXnPCROtt0MlIkeg9L0osow4qsae8z505jl33rvFFHvN9HFNK02P8z4iKX4qixPIadyxSjFmXhInW/a6VnkGZkTDU+y45+exJF0vRetydSBG5aCPl8xJ3xomKkpL8+hkpi6gbkSJGSpPJF4NOKEl70mGVMEnpRINJ1HBzg5NNB65SRIKk8sxxJO1vMBlZVcqvJz6aHvK/B3vSZTyrlm/CKFv5ZbBpdc9aZPJ048xxJJMWB4qYrJ50OaOoxVJmdylpcc9a7kkmR9qaUqSgJ13Gaxs3Rdq1XHRfMjkwamNGMWpXQ4nrWbcOcTe4avHY9Cl8P3G1NlI+L3G7Zo+oqF/PiF1J96NWFR9R05pR4ti3aeFTP5kcmLcpUOKX69ML07ZS4drn+sVQvwzb4kTc1sYMngqK8yJ7ri1aklIkJ5nsol6+k74aZt4o3LficlaMZN3gGg2VKnSizPh3xuQaN30+34L08MrkaW5sCSl0YsMryJhcy2HT51MbsSs/aCM97KL0xeI4SZ9hwSVSYnyfPvbEVtdn9Ss+dkOKnRwOn1+l51BPPVdiV37XPekk3b5X2Ykys4upF7qetddWLnOGPZ/X2VnolztJCa7LlucNpqtksgpEzK1ORHqLixeTib9O7Mf59dCFu2xdD9VF2Fd04o6Zb4/vkTIy3j61LvJ2FiXbsbnqNFd14g6b7MOzq5WZv1sw3MrvuKzZ7HEX8A1O7JHDswd9wkc/86zI2UMX71mXWpWdHN9wfkor28DLQBHpfwb79o/JCvbbnLgu96kujzxMKLa+7PUhLS53OV9ZcWOcOFxdPqTanX+BYr7aSKNA5WTEO5yoU132rmctEj+kH2jitoh/pxMl420aK8vAs+Ijh570Zlb0TS/3OHFPQh3Xy+++NZjSrY2roLCrfJ8TMea4Xh54VJDtR+naSEnZjL/LSfoPlJk/6fS7QXyxIu4G1/I5Kvu7u50465O3pX7wZp912pMeROVbRu53kr63rcsLX1aDxnwselJhrtdw4hDzmKw8cSK9seSV3wvqOrFpZdyrP97/QtXPrqaT6v/oJ1BxrJ1yUpHaTloInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJUuSkhT9fVokCJ2tffjTzuwmmgzyeu+qE+MBfxuUzRpoJohsAAAAASUVORK5CYII=",    
    locatioin =1/2, // 按鈕出現在螢幕的高度
    right = 1, // 距離右邊 px 值
    opacity = 1, // 透明度
    speed = 500, // 捲動速度
    $button = $("#goTopButton"),
    $body = $(document),
    $win = $(window);
    $button.attr("src", img);
    $button.on({
    mouseover: function() {$button.css("opacity", 1);},
    mouseout: function() {$button.css("opacity", opacity);},
    click: function() {$("html, body").animate({scrollTop: 0}, speed);}
    });
    window.goTopMove = function () {
    var scrollH = $body.scrollTop(),
    winH = $win.height(),
    css = {"top": winH * locatioin + "px", "position": "fixed", "right": right, "opacity": opacity};
    if(scrollH > 15) {
    $button.css(css);
    $button.fadeIn("slow");
    } else {
    $button.fadeOut("slow");
    }
    };
    $win.on({
    scroll: function() {goTopMove();},
    resize: function() {goTopMove();}
    });
    } )();
    //]]>
    </script>

</body>
</html>

css

.title{
    height: 100px;
    text-align:center;
    text-shadow: 0.1em 0.1em 0.05em #3368f7
  }
ul { /* 取消ul預設的內縮及樣式 */
    margin: 0;
    padding: 0;
    list-style: none;
}
img{

    width: 500px;
    position: relative;
    padding-left:450px;
}
h3{
    position: relative;
    text-align: center;
}
ul.drop-down-menu {
    border: #ccc 1px solid;
    display: inline-block;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 29px;
    margin-left: 120px;
    margin-top: 20px;

}
ul.drop-down-menu li {
    position: relative;
    white-space: nowrap;
    border-right: #ccc 1px solid;
}

ul.drop-down-menu > li:last-child {
    border-right: none;
}

ul.drop-down-menu > li {
    float: left; /* 只有第一層是靠左對齊*/
}

 ul.drop-down-menu a {
    background-color: #fff;
    color: #333;
    display: block;
    padding: 0 30px;
    text-decoration: none;
    line-height: 40px;

}
ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/
    background-color: #3368f7;
    color: #fff;
}
ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
    background-color: #3368f7;
    color: #fff;
}
table{
    position: relative;
    margin-left:auto; 
    margin-right:auto;
    text-align: left;
    border-style: groove;
    border: collapse 3px; 
}
h2{
text-align: center;
}
Marquee{
    color: rgb(52, 175, 251);
    size: 33%;
    position: relative;
    margin-top: 5px;
    text-align: center;
    font-size: larger;
}
/* 40px */
.toTop-arrow {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 33%;
	opacity: 0.6;
	background: #000;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 18px;
	height: 5px;
	border-radius: 3px;
	background: #f90;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.5rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.5rem;
}
.toTop-arrow:focus {outline: none;}

.square {
    width: 100px;
    height: 100px;
    background: blue;
    display: block;
    position: relative;

    /* animation 參數設定 */
    animation-name: MoveToRight;    /*動畫名稱，需與 keyframe 名稱對應*/
    animation-duration: 4s;    /*動畫持續時間，單位為秒*/
    animation-delay: 2s;    /*動畫延遲開始時間*/
    animation-iteration-count: infinite;    /*動畫次數，infinite 為無限次*/    
}

body{
    background-color: white;
}
footer{
    position: absolute;
    margin-top: 300px;
}
footer a{
    color: #F5E53A;
}
footer img{
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.wrapper{
    position: absolute;
    float: left;
    margin: 140px 100px;
}

.line{
    position: absolute;
    top: 0px;
    width: 2px;
    height: 8px;
    background-color: red;
}

.circle{
    position: absolute;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: blue;
}
.circle-top{
    top: 0px;
    left: -3.5px;
}
.circle-bottom{
    bottom: 0px;
    left: -3.5px;
}

.dot{
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    left: -1.5px;
}

.line1{
    margin-left: 0px;
    background-color: #2410CB;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > span{
    background-color: #D4141E;
}
.line1 > .dotted > .dot{
    background-color: #D4141E;
}
.line1 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}

.line2{
    margin-left: 35px;
    background-color: #852DF4;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
}
.line2 > span{
    background-color: #FC7E48;
}
.line2 > .dotted > .dot{
    background-color: #FC7E48;
}
.line2 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
}
.line2 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
}
.line2 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
}
.line2 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
}

.line3{
    margin-left: 70px;
    background-color: #F42DF1;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
}
.line3 > span{
    background-color: #EDEB29;
}
.line3 > .dotted > .dot{
    background-color: #EDEB29;
}
.line3 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
}
.line3 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
}
.line3 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
}
.line3 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
}

.line4{
    margin-left: 105px;
    background-color: #F91396;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
}
.line4 > span{
    background-color: #ACED29;
}
.line4 > .dotted > .dot{
    background-color: #ACED29;
}
.line4 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
}
.line4 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
}
.line4 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
}
.line4 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
}

.line5{
    margin-left: 140px;
    background-color: #D4141E;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
}
.line5 > span{
    background-color: #4EF02B;
}
.line5 > .dotted > .dot{
    background-color: #4EF02B;
}
.line5 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
}
.line5 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
}
.line5 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
}
.line5 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
}

.line6{
    margin-left: 175px;
    background-color: #FC7E48;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
}
.line6 > span{
    background-color: #38E790;
}
.line6 > .dotted > .dot{
    background-color: #38E790;
}
.line6 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
}
.line6 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
}
.line6 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
}
.line6 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
}

.line7{
    margin-left: 210px;
    background-color: #EDEB29;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
}
.line7 > span{
    background-color: #25EACC;
}
.line7 > .dotted > .dot{
    background-color: #25EACC;
}
.line7 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
}
.line7 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
}
.line7 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
}
.line7 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
}

.line8{
    margin-left: 245px;
    background-color: #ACED29;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
}
.line8 > span{
    background-color: #309CDF;
}
.line8 > .dotted > .dot{
    background-color: #309CDF;
}
.line8 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
}
.line8 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
}
.line8 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
}
.line8 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
}

.line9{
    margin-left: 280px;
    background-color: #4EF02B;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
}
.line9 > span{
    background-color: #2544E7;
}
.line9 > .dotted > .dot{
    background-color: #2544E7;
}
.line9 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
}
.line9 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
}
.line9 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
}
.line9 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
}

.line10{
    margin-left: 315px;
    background-color: #38E790;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
}
.line10 > span{
    background-color: #852DF4;
}
.line10 > .dotted > .dot{
    background-color: #852DF4;
}
.line10 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
}
.line10 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
}
.line10 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
}
.line10 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
}

.line11{
    margin-left: 350px;
    background-color: #25EACC;
    -webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
    animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
}
.line11 > span{
    background-color: #F42DF1;
}
.line11 > .dotted > .dot{
    background-color: #F42DF1;
}
.line11 > .dotted > .dot-top{
    top: 0px;
    -webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
    animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;

}
.line11 > .dotted > .dot-bottom{
    bottom: 0px;
    -webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
    animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
}
.line11 > .dotted > .dot-middle-top{
    top: 0px;
    -webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
    animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
}
.line11 > .dotted > .dot-middle-bottom{
    bottom: 0px;
    -webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
    animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
}

@-webkit-keyframes line{
    0%{height: 4px; top: 0px; left: 0px; -webkit-transform: rotate(-65deg)}
    10%{height: 220px; top: -110px; left: 15px;}
    45%{height: 200px; top: -100px; left: 25px;}
    70%{height: 8px; top: 0px; left: 25px; -webkit-transform: rotate(0deg);}
    100%{height: 8px; top: 0px; left: 15px; -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes dot-top{
    0%{top: -30px}
    10%{top: -30px;}
    45%{top: -25px;}
    60%{top: 0px;}
    100%{top: 0px;}
}
@-webkit-keyframes dot-bottom{
    0%{bottom: -30px}
    10%{bottom: -30px;}
    45%{bottom: -25px;}
    60%{bottom: 0px;}
    100%{bottom: 0px;}
}
@-webkit-keyframes dot-middle-top{
    0%{}
    10%{}
    45%{top: 98px;}
    70%{top: -50px;}
    85%{top: 0px;}
    100%{top: 0px;}
}
@-webkit-keyframes dot-middle-bottom{
    0%{}
    10%{}
    45%{bottom: 98px;}
    70%{bottom: -50px;}
    85%{bottom: 0px;}
    100%{bottom: 0px;}
}

@keyframes line{
    0%{height: 4px; top: 0px; left: 0px; transform: rotate(-65deg)}
    10%{height: 220px; top: -110px; left: 15px;}
    45%{height: 200px; top: -100px; left: 25px;}
    70%{height: 8px; top: 0px; left: 25px; transform: rotate(0deg);}
    100%{height: 8px; top: 0px; left: 15px; transform: rotate(0deg);}
}
@keyframes dot-top{
    0%{top: -30px}
    10%{top: -30px;}
    45%{top: -25px;}
    60%{top: 0px;}
    100%{top: 0px;}
}
@keyframes dot-bottom{
    0%{bottom: -30px}
    10%{bottom: -30px;}
    45%{bottom: -25px;}
    60%{bottom: 0px;}
    100%{bottom: 0px;}
}
@keyframes dot-middle-top{
    0%{}
    10%{}
    45%{top: 78px;}
    70%{top: -50px;}
    85%{top: 0px;}
    100%{top: 0px;}
}
@keyframes dot-middle-bottom{
    0%{}
    10%{}
    45%{bottom: 78px;}
    70%{bottom: -50px;}
    85%{bottom: 0px;}
    100%{bottom: 0px;}
}
var.img{
width: 100px;
}